<template>
  <div class="box">
    <mt-header fixed title="商品"></mt-header>
<div v-if="give == 0" class="buy">
          <img src="/shopimg/give.jpg" alt="" />
          <div style="width: 80%; margin: auto; text-align: center">
            <mt-button type="primary" @click="buy()">付款成功</mt-button>
            <mt-button type="danger" @click="give = 1">取消</mt-button>
          </div>
        </div>
    <mt-navbar v-model="wupin" fixed style="top: 5.7vh">
      <mt-tab-item id="1">票务</mt-tab-item>
      <mt-tab-item id="2">娱乐设施</mt-tab-item>
      <mt-tab-item id="3">其他</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="wupin">
      <mt-tab-container-item id="1">
        <div class="wupin" v-for="(item, index) in data0" :key="index">
          <div class="zhongjian">
            <img :src="'/shopimg/' + item.image" alt="物品图片" />
            <div>
              <span>{{ item.name }}</span>
              <span>单价：￥{{ item.price }}</span>
            </div>
          </div>
          <hr />
          <div class="concal">
            <span>共计：￥ {{ item.price * item.count }}</span>
            <div>
              <button
                type="default"
                plain
                @click="item.count--"
                :disabled="item.count <= 0"
              >
                -
              </button>
              <span>{{ item.count }}</span>
              <button type="default" plain @click="item.count++">+</button>
            </div>
          </div>
          <div class="btn">
            <mt-button
              type="primary"
              size="small"
              plain
              @click="onc0(index)"
              :disabled="item.count <= 0"
              >加入购物车</mt-button
            >
            <mt-button
              type="primary"
              size="small"
              :disabled="item.count <= 0"
              @click="gobuy()"
              >直接购买</mt-button
            >
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div class="wupin" v-for="(item, index) in data1" :key="index">
          <div class="zhongjian">
            <img :src="'/shopimg/' + item.image" alt="物品图片" />
            <div>
              <span>{{ item.name }}</span>
              <span>单价：￥{{ item.price }}</span>
            </div>
          </div>
          <hr />
          <div class="concal">
            <span>共计：￥ {{ item.price * item.count }}</span>
            <div>
              <button
                type="default"
                plain
                @click="item.count--"
                :disabled="item.count <= 0"
              >
                -
              </button>
              <span>{{ item.count }}</span>
              <button type="default" plain @click="item.count++">+</button>
            </div>
          </div>
          <div class="btn">
            <mt-button
              type="primary"
              size="small"
              plain
              @click="onc1(index)"
              :disabled="item.count <= 0"
              >加入购物车</mt-button
            >
            <mt-button
              type="primary"
              size="small"
              :disabled="item.count <= 0"
              @click="gobuy()"
              >直接购买</mt-button
            >
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <div class="wupin" v-for="(item, index) in data2" :key="index">
          <div class="zhongjian">
            <img :src="'/shopimg/' + item.image" alt="物品图片" />
            <div>
              <span>{{ item.name }}</span>
              <span>单价：￥{{ item.price }}</span>
            </div>
          </div>
          <hr />
          <div class="concal">
            <span>共计：￥ {{ item.price * item.count }}</span>
            <div>
              <button
                type="default"
                plain
                @click="item.count--"
                :disabled="item.count <= 0"
              >
                -
              </button>
              <span>{{ item.count }}</span>
              <button type="default" plain @click="item.count++">+</button>
            </div>
          </div>
          <div class="btn">
            <mt-button
              type="primary"
              size="small"
              plain
              @click="onc2(index)"
              :disabled="item.count <= 0"
              >加入购物车</mt-button
            >
            <mt-button
              type="primary"
              size="small"
              :disabled="item.count <= 0"
              @click="give=0"
              >直接购买</mt-button
            >
          </div>
        </div>

        
      </mt-tab-container-item>
    </mt-tab-container>
    <mt-tabbar v-model="selected" class="tabbar" fixed>
      <mt-tab-item id="index">
        <img src="../assets/img/home.png" alt="" slot="icon" /> 首页
      </mt-tab-item>
      <mt-tab-item id="fenlei">
        <img src="../assets/img/list.png" alt="" slot="icon" />商品
      </mt-tab-item>
      <mt-tab-item id="gouwuche">
        <img src="../assets/img/car.png" alt="" slot="icon" />购物车
      </mt-tab-item>
      <mt-tab-item id="mine">
        <img src="../assets/img/user.png" alt="" slot="icon" />我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      wupin: "1",
      data0: [],
      data1: [],
      data2: [],
      idnum: "", //储存商品pid 和 数量
      user: "", //接收用户名
      selected: "fenlei",
      give: 1,
    };
  },
  mounted() {
    if (sessionStorage.vuex) {
      this.user = JSON.parse(sessionStorage.vuex).user;
    }
    this.getData();
  },
  methods: {
    buy() {
      this.give = 1;
      Toast({
        message: "购买成功！",
        position: "bottom",
        duration: 1000,
      });
    },
    gobuy() {
      this.give = 0;
      console.log(this.give);
    },
    // 向user传送pid和数量
    getPid() {
      let params = `username=${this.user}&shopcart=${this.idnum}`;
      this.axios.put("/edit", params).then((res) => {
        console.log(res);
      });
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    //添加购物车事件
    onc0(index) {
      if (sessionStorage.vuex || sessionStorage.vuex != "null") {
        console.log(sessionStorage.vuex);
        let aa = `{"pid":${this.data0[index].pid},"num":${this.data0[index].count}}#`;
        this.idnum += aa;
        console.log(this.idnum);
        this.getPid();
        Toast({
          message: "已加入购物车",
          position: "bottom",
          duration: 1000,
        });
      } else {
        // alert("您没有登录,无法加购物车,请先登录,点击确定去登录");
        this.$router.push("/login");
      }
    },
    //添加购物车事件
    onc1(index) {
      if (sessionStorage.vuex) {
        let aa = `{"pid":${this.data1[index].pid},"num":${this.data1[index].count}}#`;
        this.idnum += aa;
        console.log(this.idnum);
        this.getPid();
        Toast({
          message: "已加入购物车",
          position: "bottom",
          duration: 1000,
        });
      } else {
        // alert("您没有登录,无法加购物车,请先登录,点击确定去登录");
        this.$router.push("/login");
      }
    }, //添加购物车事件
    onc2(index) {
      if (sessionStorage.vuex) {
        let aa = `{"pid":${this.data2[index].pid},"num":${this.data2[index].count}}#`;
        this.idnum += aa;
        console.log(this.idnum);
        this.getPid();
        Toast({
          message: "已加入购物车",
          position: "bottom",
          duration: 1000,
        });
      } else {
        // alert("您没有登录,无法加购物车,请先登录,点击确定去登录");
        this.$router.push("/login");
      }
    },
    // 想服务器请求数据
    getData() {
      this.axios.get("/product").then((res) => {
        let datas = res.data.results;
        for (var i in datas) {
          if (datas[i].type == 0) {
            this.data0.push(datas[i]);
          }
          if (datas[i].type == 1) {
            this.data1.push(datas[i]);
          }
          if (datas[i].type == 2) {
            this.data2.push(datas[i]);
          }
        }
        console.log(datas[1].count);
      });
    },
  },
  watch: {
    selected(newval, oldval) {
      console.log(oldval);
      switch (newval) {
        case "fenlei":
          this.$router.push({
            path: "/fenlei",
          });
          break;
        case "gouwuche":
          this.$router.push({
            path: "/gouwuche",
          });
          break;
        case "index":
          this.$router.push({
            path: "/",
          });
          break;
        case "mine":
          this.$router.push({
            path: "/mine",
          });
          break;
      }
    },
  },

  created() {
    if (sessionStorage.vuex) {
      this.username = JSON.parse(sessionStorage.vuex).user;
    }
  },
};
</script>

<style lang="scss" scoped>
.buy {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 1080px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 200;
  button {
    margin: 10px;
  }
  span {
    display: block;
    margin: auto;
    width: 100%;
    text-align: center;
    font-size: 30px;
    color: #fff;
    margin-top: 3vh;
    margin-bottom: 3vh;
  }

  img {
    width: 90%;

    display: block;
    margin: auto;
    margin-top: 6vh;
  }
}
.wupin {
  width: 95%;
  margin: auto;
  margin-top: 10px;
  background-color: rgb(250, 250, 250);
  padding-right: 10px;
  padding-left: 10px;
  box-sizing: border-box;

  .zhongjian {
    display: flex;
    margin-top: 10px;
    img {
      width: 40%;
      height: 15vh;
      display: block;
      margin-right: 10px;
    }
    div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      span {
        display: block;
      }
    }
  }
}
.concal {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  span {
    display: inline-block;
  }
  div {
    button {
      display: inline-block;
      width: 20px;
      height: 20px;
      text-align: center;
      padding: 0px;
    }
    span {
      width: 32px;
      height: auto;
      display: inline-block;
      text-align: center;
    }
  }
}
.btn {
  display: flex;
  justify-content: flex-end;
  button {
    width: 22vw;
    padding: 0px;
    margin-right: 2vw;
  }
}
.tabbar {
  bottom: 0px;
  height: 8vh;
}
.box {
  padding-top: 13vh;
  padding-bottom: 10vh;
}
</style>